
<template>
	<view class="assist">
		<view class="assist-back">
			<image class="assist-posi" src="/static/img/assist.png"></image>
		<view class="blo5">
			<view class="lin1">HI，</view>
			<view class="lin2">我是您的私人助理</view>
		</view>

	</view>

		<scroll-view style=" margin-top: -110px;height: 70px;" scroll-x>
		<view class="block1">
			<view :class="activeIdx==idx?'active':'none'" class="blo7" @tap="chooseTab(idx)" v-for="(item,idx) in tabs" :key="idx">
				{{ item.title }}
				
				
			</view>

		</view>
	</scroll-view>
	
		<view class="blo1">
			<view class="blo2" v-for="(item,index) in data" :key="index">
			<view class="flex-2">
				<view class="flexl">
					<u-avatar :src="item.tp_url" size="100"></u-avatar>
				<text class="text1">{{ item.title }}</text>
				
				</view>
				<text @tap="goChat(index)" class="btn">使用</text>
				
			</view>
			<view class="content">{{ item.desc }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"subscribe",
    components:{},
		data() {
			return {
				activeIdx:0,
				page:1,
				total:0,
				tabs:[],
				
				data:[
					
					
				],
				
            }
		},
		onLoad() {
				this.getData()
		},
		mounted() {
			
		},
		
		computed:{
			
		},
		methods: {
			async goChat(idx){
				const r = await this.$u.api.assistIsHave({
					model_id:this.data[idx].id
				})
				if(r){
					if(r.data.have==1){
						uni.navigateTo({
							url: '/pages/chat/chat?type=assist&id='+this.data[idx].id
						})
					}else{
						this.$u.toast('此模型仅VIP会员可用');
					}
					
				}else{
					this.$u.toast('此模型仅VIP会员可用');
				}
				
			},
			goBottom(){
				if(this.total/20>this.page){
					this.page++
					this.getDataList()
				}
			},
			
			async getData(){
				const r = await this.$u.api.assistClassify()
				if(r){
					this.tabs = r.data
					this.getDataList()
				}
			},
			async getDataList(){
				const r = await this.$u.api.assistList({
					classify_id:this.tabs[this.activeIdx].id,
					page:this.page,
					size:20,
					title:this.keyword,
				})
				if(r){
					if(this.page==1) this.data = []
					r.data.item.forEach(item1=>{
						if(item1.status){
							this.data.push(item1)
						}
					})
					// this.data = [...this.data,...r.data.item]
					this.total = r.data.count
				}
			},
			chooseTab(idx){
				this.activeIdx = idx
				this.page = 1
				this.getDataList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.assist{
		
		.assist-back{
		width:100%;
		height: 220px;
		// background-image: url(/static/img/assist.png);
		// background-size: 220px 140px;
		// background-position: right top;
		// background-repeat: no-repeat;
	
	}
	.assist-posi{
width: 220px;
height: 140px;
position: absolute;
right: 0;

	}
		.blo5{
		padding: 40rpx 30rpx;
		.lin1{
		color: #98C5B7;
		font-size: 60rpx;
		font-weight: 800;
		margin:0rpx 0 16rpx;
	}
	.lin2{
		color: #98C5B7;
		font-size: 40rpx;

	}
	
	}
	.blo1{
		color: #fff;
		padding: 0 24rpx;
		.blo2{
			background:#22232F;
			border-radius: 30rpx;
			padding: 30rpx 0;
			margin-bottom: 30rpx;
			padding-bottom: 0px;
		}
		.flex-2{
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.text1{
				margin-left: 20rpx;
				font-size: 40rpx;
				color: #fff;
			}
			.flexl{
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.btn{
				border-radius: 50rpx;
			background-image: linear-gradient(to bottom, #7CD887,#75CCD1);
			padding:14rpx 40rpx;
			color:#000;
			font-size: 34rpx;
			font-weight: 500;
			text-align: center;
			}
		}
		.content{
			background: #2E2E3E;
			border-radius: 30rpx;
			padding: 34rpx;
			color: #B0AFC0;
			font-size: 30rpx;
			line-height: 40rpx;
			margin-top: 40rpx;
		}
	}
	.block1{
		white-space: nowrap;
		overflow-x: auto;
		margin:50rpx  0  30rpx;
		.blo7{
			display: inline-flex;
			color: #fff;
			font-size: 38rpx;
			padding-bottom: 12rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
		.active{
			color: #78A4A1;
			font-weight: 500;
			border-bottom: 6rpx solid #78A4A1;
		}
		
	}

		
}
</style>
